<template>
	<view class="content" :style="$theme.pageStyle">
		<view class="banner">
			<u-swiper :list="isbanner" height="120" keyName="img" radius="8" indicator indicatorMode="line" circular></u-swiper>
		</view>

		<view class="menu-nav">
			<scroll-view scroll-x @scroll="ScrollMenu" class="nav-list">
				<view class="nav" ref="nav" :style="navList.length<=10?'flex-direction:row':''">
					<view class="list" v-for="(item,index) in navList" @click="Tourl(item.url)" :key="item.id">
						<image :src="item.images" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
			<view class="indicator" v-if="navList.length>10">
				<view class="plan">
					<view class="bar" :style="'left:'+slideNum+'%'"></view>
				</view>
			</view>
		</view>
		
		
		<view class="hetong" v-if="contract.length != 0 && miniapp_audit != 1">
			<view class="new-product">
				<view class="product-title">
					<view class="title">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/011710522601C9Gjjv.png">
						</image>
						<text>{{$t('change.合同下载')}}</text>
					</view>
					<view class="describe" @click="ToUrl('/contract/index/index')">
						<text>{{$t('change.更多')}}</text>
					</view>
				</view>
				<view class="goods-list">
					<block v-for="(item,index) in contract" :key="index">
						<view class="list" @click="Tourl('/contract/detail/index?id='  + item.id )">
							<view class="pictrue">
								<image :src="item.goods_image"></image>
							</view>
							<view class="title u-line-1">
								<text class="selling-title">{{item.name}}</text>
							</view>
							<view class="price">
								<text class="selling-price">￥{{item.price}}</text>
								<text class="original-price">￥{{item.scribing_price}}</text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		
		<view class="vedio" v-if="course.length != 0 && miniapp_audit != 1">
			<view class="product-title">
				<view class="title">
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/211710523461kRJ5su.png">
					</image>
					<text>{{$t('change.推荐视频')}}</text>
				</view>
				<view class="describe" @click="Tourl('/course/index/more')">
					<text>{{$t('change.更多')}}</text>
				</view>
			</view>
		
			<view class="flex space">
				<block v-for="(item,index) in course" :key="index">
					<view class="box45 pb10" style="position: relative;" @click="ToCourse(item)">
						<view class="btn-mini videolaber" v-if="item.type === 1">
							图文</view>
						<view class="btn-mini videolaber" v-else-if="item.type === 2">
							音频</view>
						<view class="btn-mini videolaber" v-else>
							视频</view>
						<image class="integral-mall-goods" mode="aspectFill" :src="item.cover">
						</image>
						<view class="mt8 ft14 ftw600 text-center text-over cl-main">{{item.name}}</view>
						<!-- <view class="text-center mt5 ft12 cl-notice">¥ {{item.sell_price}}</view> -->
						<view class="flex alcenter mt5">
							<!-- <image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image> -->
							<text class="ft14 cl-orange ftw600" v-if="item.vip_free === 1">会员免费</text>
							<text class="ft14 cl-orange ftw600" v-else>¥ {{item.sell_price}}</text>
		
						</view>
					</view>
				</block>
			</view>
		
		</view>
		


		<view class="recommend-info">
			<view class="recommend-title">
				<view class="title">
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/5317105254734EuUaC.png"
						mode=""></image>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsList"
					@click="ToUrl('/service/goods/detail?id=' + item.id)" :key="index">
					<view class="pictrue">
						<image :src="item.image" mode="heightFix"></image>
					</view>
					<view class="title-tag">
						<view class="tag">
							<!-- <text>特价</text> -->
							{{item.name}}
						</view>
					</view>
					<view class="price-info">
						<view class="user-price">
							<text class="min">￥</text>
							<text class="max">{{item.price}}</text>
						</view>
						<view class="vip-price">
							<!-- <image src="/static/vip_ico.png"></image> -->
							<text>￥{{item.scribing_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar />
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				isbanner: [],
				navList: [],
				contract: [],
				course: [],
				goodsList: [],
				skillList: [],
				couponData: [],
				miniapp_audit: uni.getStorageSync('miniapp_audit'),
			}
		},
		onShow() {
			this.IndexData()
		},
		methods: {
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},

			IndexData() {
				this.$api.ShopApi.index().then(res => {
					if (res.code == 1) {
						this.navList = res.data.navs
						this.isbanner = res.data.banenr
						this.contract = res.data.contract
						this.course = res.data.course
						this.goodsList = res.data.service
						this.skillList = res.data.skill
						// this.cate = res.data.cate
						// this.lawyer = res.data.lawyer
						// this.office = res.data.office
					}
				})
			},
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			ToCourse(item) {
				uni.navigateTo({
					url: '/course/detail/index?id=' + item.id
				})
			},
			//点击商品
			clickItem(e) {
				uni.navigateTo({
					url: '/service/goods/detail?id=' + e.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	@import url("@/common/css/course.css");
	
	.content {
		font-family: "SemiBold";
	}

	.swiper-card {
		width: 96%;
		background: linear-gradient(180deg, #0899f4 0%, #92c3e2 100%);
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 20rpx 0 20rpx 20rpx;
		border-radius: 12rpx;
		.swiper-card-title {
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card-name {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 32rpx;
				color: #FFFFFF;
			}

			.go-more {
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFFFFF;
				margin-right: 16rpx;
			}
		}
	}

	.banner {
		margin: 10px;
	}

	.menu-nav {
		position: relative;
		height: 300rpx;
		margin: 30rpx auto;
		margin: 10px;
		background: #fff;
		border-radius: 8px;
		padding: 10px;

		.nav-list {
			white-space: nowrap;
			height: 270rpx;
			width: 100%;

			.nav {
				display: inline-block;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				height: 270rpx;
			}

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				height: 130rpx;
				margin-bottom: 20rpx;

				image {
					width: 75rpx;
					height: 75rpx;
					border-radius: 100%;
				}

				text {
					font-size: 26rpx;
					color: #363636;
					margin-top: 10rpx;
				}
			}
		}

		.indicator {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 30rpx;

			.plan {
				position: relative;
				width: 100rpx;
				height: 8rpx;
				border-radius: 8rpx;
				background-color: #e1e1e1;

				.bar {
					position: absolute;
					width: 50%;
					height: 100%;
					border-radius: 6rpx;
					background-color: var(--color-primary);
				}
			}
		}
	}

	.product-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;

		.title {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			text {
				font-size: 30rpx;
				color: #000;
				margin-left: 10rpx;
				font-weight: bold;
			}
		}

		.describe {
			display: flex;
			align-items: center;

			text {
				font-size: 26rpx;
				color: #a09f9f;
			}
		}
	}


	.hetong {
		background: #fff;
		border-radius: 8px;
		padding: 10px;
		margin: 10px;

		.new-product {
			padding: 0 25rpx;
			height: 350rpx;

			.goods-list {
				white-space: nowrap;
				width: 100%;
				height: 280rpx;
				overflow-y: hidden;
				overflow-x: auto;

				.list {
					display: inline-block;
					width: 33%;
					height: 100%;
					margin-right: 20rpx;

					.title {
						font-size: 14px;
						line-height: 15px;
						height: 10%;
					}

					.pictrue {
						width: 100%;
						height: 70%;

						image {
							width: 150rpx;
							height: 180rpx;
							border-radius: 8px;
						}
					}

					.price {
						display: flex;
						align-items: center;
						width: 100%;
						height: 10%;
						margin-top: 2px;

						.selling-price {
							font-size: 28rpx;
							font-weight: bold;
							color: #FF0000;
						}

						.original-price {
							font-size: 24rpx;
							text-decoration: line-through;
							color: #bbbaba;
							margin-left: 10rpx;
						}
					}
				}
			}

		}
	}

	.vedio {
		background: #fff;
		border-radius: 8px;
		padding: 10px;
		margin: 10px;

		.integral-mall-goods {
			width: 100%;
			height: 200rpx;
			background: #F2F2F2;
			border-radius: 16upx;
		}

	}

	.recommend-info {
		width: 100%;
		background-color: #f2f2f2;

		.recommend-title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;

			.title {
				display: flex;
				align-items: center;

				image {
					width: 416rpx;
					height: 40rpx;
				}
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 30rpx;

			.list {
				width: 49%;
				height: 540rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.pictrue {
					display: flex;
					justify-content: center;
					width: 100%;

					image {
						height: 350rpx;
					}
				}

				.title-tag {
					// display: flex;
					height: 100rpx;
					padding: 20rpx;

					.tag {
						float: left;
						margin-right: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space: normal;
						font-size: 26rpx;
						line-height: 40rpx;

						text {
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 4rpx 16rpx;
							background: linear-gradient(to right, #fe3b0f, #fc603a);
							border-radius: 6rpx;
							margin-right: 10rpx;
						}
					}
				}

				.price-info {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					height: 80rpx;

					.user-price {
						display: flex;
						align-items: center;

						text {
							color: #FF0000;
						}

						.min {
							font-size: 24rpx;
						}

						.max {
							font-size: 32rpx;
						}
					}

					.vip-price {
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}

						text {
							color: #fcb735;
							font-size: 24rpx;
							text-decoration-line: line-through;
						}
					}
				}
			}
		}
	}

	.videolaber {
		position: absolute;
		top: 20upx;
		right: 20upx;
		border-radius: 10upx;
		font-size: 18upx;
		width: 60upx;
		height: 36upx;
		z-index: 1;
		background: rgb(0, 198, 87);
		color: rgb(255, 255, 255);
		box-shadow: rgba(0, 198, 87, 0.3) 0px 4px 17px -4px;
	}
</style>